<template>
	<div class="app-container">
		<el-row v-if="data.status == 0">
			<el-col :span="24" class="card-box">
				<el-button type="primary" @click="examine">审 核</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="card-box">
				<el-card>
					<div slot="header"><span><i class="el-icon-s-order"></i> 订单信息</span></div>
					<div class="el-table el-table--enable-row-hover el-table--medium">
						<table cellspacing="0" style="width: 100%;">
							<tbody>
								<tr>
									<td class="el-table__cell is-leaf flex2">
										<div class="cell">市场</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.courseDealerName }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">联系人</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.userName }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">联系电话</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.userPhone }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">申请原因</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.type }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">描述</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.content }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">凭证</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell" style="display: flex;">
											<el-image style="width: 70px; height: 70px;margin: 0px 5px;" v-for="(voucher, i) in data.voucherList" :key="i" :src="voucher" fit="contain" :preview-src-list="data.voucherList"></el-image>
										</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">快递单号（市场）</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.mailNumberDealer }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">收货人名称</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.contactUserName }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">收货人手机号</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.contactUserPhone }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">收货地址</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.contactUserAddress }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">快递单号</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.mailNumber }}</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">状态</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">
											<dict-tag :options="dict.type.complaint_order_status" :value="data.status" />
										</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">审批状态</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">
											<dict-tag :options="dict.type.task_status" :value="data.taskStatus" />
										</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">流水号</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">
										<a :href="data.openUrl" target="_blank" style="color: blue;">{{ data.sn }}</a>
									</div>
									</td>
								</tr>
								<tr>
									<td class="el-table__cell is-leaf">
										<div class="cell">申请时间</div>
									</td>
									<td class="el-table__cell is-leaf">
										<div class="cell">{{ data.createTime }}</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="card-box">
				<el-card>
					<div slot="header"><span><i class="el-icon-s-goods"></i> 产品</span></div>
					<el-table :data="data.goods" border style="width: 100%">
						<el-table-column prop="goodsName" label="产品名称" align="center">
						</el-table-column>
						<el-table-column prop="goodsBatchNumber" label="产品批号" align="center">
						</el-table-column>
						<el-table-column prop="goodsProduceTime" label="产品生产时间" align="center">
						</el-table-column>
						<el-table-column prop="goodsNum" label="问题产品数量" align="center">
							<template slot-scope="scope">
								<div class="content">
									{{ scope.row.goodsNum }} {{ scope.row.goodsUnit }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="goodsNum" label="换货/补货数量" align="center">
							<template slot-scope="scope">
								<div class="content">
									{{ scope.row.repairGoodsNum }} {{ scope.row.repairGoodsUnit }}
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	
		<!-- 审核 -->
		<el-dialog title="审核" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="审核" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :label="1">同意</el-radio>
						<el-radio :label="4">拒绝</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否寄回" prop="isSendBack" v-if="form.status == 1">
					<el-radio-group v-model="form.isSendBack">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="2">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="快递单号" prop="mailNumber" v-if="form.status == 1 && form.isSendBack == 2">
					<el-input type="input" v-model="form.mailNumber" placeholder="请输入快递单号" />
				</el-form-item>
				<el-form-item label="拒绝原因" prop="msg">
					<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" v-model="form.msg" placeholder="请输入拒绝原因" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="open = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getOrder, updateOrder } from '@/api/complaint/order'
	export default {
		dicts: ['complaint_order_status', 'task_status'],
		data() {
			return {
				id: 0,
				data: [],
				address: [],
				tableData: [],
				open: false,
				form: {
					status: 0,
					isSendBack: 0,
					mailNumber: '',
					msg: ''
				}
			}
		},
		created() {
			this.id = this.$route.params && this.$route.params.Id;
			this.getData();
		},
		methods: {
			/**
			 * 获取行程信息
			 */
			getData() {
				getOrder(this.id).then(res => {
					this.data = res.data;
					this.data.voucherList = this.data.voucherList ? this.data.voucherList.map(item => item.url) : [];
				})
			},
			/**
			 * 审核
			 */
			examine() {
				this.form.status = 1;
				this.form.isSendBack = 1;
				this.form.mailNumber = '';
				this.open = true
			},
			/**
			 * 提交审核
			 */
			submitForm() {
				if(this.form.status == 0){
					this.$modal.msgError("请选择审核状态！");
				}else if(this.form.status == 4 && !this.form.msg){
					this.$modal.msgError("请输入拒绝原因！");
				}else{
					updateOrder({
						id: this.id,
						status: this.form.status,
						isSendBack: this.form.status == 1 ? this.form.isSendBack : 1,
						mailNumber: this.form.status == 1 && this.form.isSendBack == 2 ? this.form.mailNumber : '',
						msg: this.form.status == 4 ? this.form.msg : ''
					}).then(res => {
						this.open = false;
						if(res.code == 200){
							this.$modal.msgSuccess("审核成功");
							this.getData();
						}else{
							this.$modal.msgError(res.msg);
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.flex2 {
		width: 20%;
	}
</style>